<template>
  <div class="search">
    <van-nav-bar left-arrow :border="false" @click-left="onClickLeft" />
    <van-search
      v-model="value"
      placeholder="输入商家、商品名称"
      show-action
      shape="round"
      @search="onSearch"
      @input="onInput"
      @clear="clear_search"
    >
      <div slot="action" @click="onSearch(value)">搜索</div>
    </van-search>
    <ul v-show="!showflag" style="padding-bottom:10%;">
      <li
        v-for="li_info in searchlist"
        :key="li_info.id"
        v-show="searchlist.length"
        @click="gotogoodsinfo(li_info.id)"
      >
        <div>
          <img
            :src="`https://cube.elemecdn.com/${li_info.restaurant.image_path}?x-oss-process=image/format,webp/resize,w_35,h_35,m_fixed`"
          />
          <div class="bomborbox">
            <p class="p1text">
              {{li_info.restaurant.name}}
              <span
                v-for="item in li_info.restaurant.activities"
                :key="item.id"
                :style="{'backgroundColor':'#'+item.icon_color}"
                class="tagspan"
              >{{item.icon_name}}</span>
              <!-- <span
                class="tagspan"
              >{{li_info.restaurant.delivery_mode}}</span>-->
              <span class="rating">评价:{{li_info.restaurant.rating}}</span>
            </p>
            <p></p>
          </div>
        </div>
      </li>
    </ul>

    <section class="history searchdiv" v-if="this.historys.length" v-show="this.showflag">
      <header>
        历史搜索
        <van-icon name="delete" @click="clear_history" />
      </header>
      <section>
        <button
          v-for="(history,index) in historys"
          :key="index"
          @click="tosearch(history)"
        >{{history}}</button>
      </section>
    </section>
    <section class="hot searchdiv" v-show="this.showflag">
      <header>热门搜索</header>
      <section>
        <button v-for="(hot,index) in hots" :key="index" @click="tosearch(hot)">{{hot}}</button>
      </section>
    </section>
  </div>
</template>
<script>
export default {
  data: () => ({
    value: '',
    hots: [],
    historys: [],
    // 保存搜索的商家信息
    searchlist: [],
    showflag: true
  }),
  created() {
    this.getsearchlist()
    this.getsearchhistroylist()
  },
  methods: {
    // 跳转到商家
    gotogoodsinfo(id) {
      // console.log(id);
      this.$router.push('/home/goodinfo/' + id)
    },
    // 清空ulli
    clear_search() {
      // console.log(1)
      this.searchlist = []
    },
    // 返回
    onClickLeft() {
      this.$router.go(-1)
    },
    tosearch(search) {
      // console.log(search);
      // this.onSearch(search);
      this.value = search
      this.onInput(search)
      this.save_search_history(search)
    },
    // 搜索
    onSearch(value) {
      console.log(this.searchlist)
      // console.log(1)
      // console.log(value); // 把value传入
      // 获取搜索到的信息数组
      // console.log(this.searchlist)
      // 有数据
      this.save_search_history(value)
      if (this.searchlist.length != 0) {
        this.$router.push('/home/goodinfo/' + this.searchlist[0].id)
      }
    },
    // 保存搜索历史
    save_search_history(value) {
      var searchvalue = value
      if (this.$store.state.search_history.indexOf(value) === -1) {
        this.$store.state.search_history.push(searchvalue)
        // 保存搜索历史
        this.$store.commit('set_search_history', this.$store.state.search_history)
      }
    },
    // 输入框搜索
    onInput(value) {
      this.showflag = false
      // console.log(value);
      // 当value不为空
      if (value) {
        // console.log(value);
        this.getsearchinfo(value)
      } else {
        this.showflag = true
        // this.getsearchhistroylist();
      }
    },
    // 获取搜索的商家信息ulli
    async getsearchinfo(info) {
      const {
        data: { has_next, items, meta }
      } = await this.$axios.get('api/getrestaurant')
      // console.log(items, info);
      // this.historys = history;  //将history 改为本地数据
      var newinfo = []
      items.forEach((el, index) => {
        // console.log(el, index);
        // console.log(el.restaurant.name);
        if (el.restaurant.name.indexOf(info) !== -1) {
          // console.log(el.restaurant.name)
          // console.log(el.restaurant.rating);
          el.restaurant.rating = el.restaurant.rating.toFixed(1)
          newinfo.push(el)
        }
      })
      this.searchlist = newinfo
      // console.log(newinfo)
      // console.log(this.searchlist);
    },
    // 获取搜索历史数据
    async getsearchlist() {
      const {
        data: { history, hot }
      } = await this.$axios.get('api/getsearch')
      this.hots = hot
      // this.historys = history;  //将history 改为本地数据
    },
    // 清空搜索历史
    clear_history() {
      this.value = ''
      this.historys = []
      this.$store.commit('clear_history')
      this.searchlist = []
      // console.log(this.searchlist);
    },
    // 加载搜索历史
    getsearchhistroylist() {
      this.historys = this.$store.state.search_history
      // console.log(this.histroys);
    }
  }
}
</script>
<style lang="less" scoped>
.search {
  width: 100%;
  height: 100%;
  background-color: #fff;
  ul {
    width: 100%;
    background-color: #fff;
    li {
      width: 100%;
      padding: 2% 4%;
      box-sizing: border-box;
      div {
        display: flex;
        align-items: center;
        img {
          margin-right: 4%;
          margin-top: -2%;
        }
        div {
          border-bottom: 1px solid #e3e3e3;
          width: 100%;
          .p1text {
            font-size: 14px;
            width: 100%;
            .tagspan {
              display: inline-block;
              padding: 0.1% 0.8%;
              color: #fff;
              margin-left: 2%;
              text-align: center;
            }
            .rating {
              float: right;
              color: #999;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
  .van-nav-bar {
    line-height: 58px;
    .van-nav-bar__left {
      left: 2px;

      .van-icon {
        font-size: 25px;
        color: #999;
      }
    }
  }
  .van-search {
    padding: 0px;
    padding-left: 12px;
    padding-right: 3px;
    .van-search__content {
      border-radius: 0px;
      width: 98%;
      margin-right: 4px;
      background-color: #f8f8f8;
      .van-cell {
        padding: 3px 14px 3px 0;
      }
    }
    .van-search__action {
      font-size: 16px;
      font-weight: bold;
    }
  }
  .searchdiv {
    margin-top: 20px;
    header {
      padding: 6px 12px;
      font-size: 16px;
      color: #666;
      font-weight: bold;
    }
    section {
      padding: 0 12px 12px;
      button {
        color: #666;
        background-color: #f7f7f7;
        margin-top: 12px;
        margin-right: 12px;
        font-size: 14px;
        padding: 6px 8px;
        border-radius: 2px;
        border: none;
      }
    }
  }
  .history {
    header {
      display: flex;
      justify-content: space-between;
      i {
        font-size: 18px;
      }
    }
  }
}
</style>